<template>
  <div>
    <div id="footer">
      <div class="home-inner">
        <div class="footer-about">
          <dl class="footer-1">
            <dt>企业服务</dt>
            <dd class="footer-1-1">
              <a href="https://www.zhipin.com/job_detail/">职位搜索</a>
              <a href="https://news.zhipin.com/">新闻资讯</a>
              <a href="https://app.zhipin.com/">BOSS直聘APP</a>
              <a href="https://ir.zhipin.com/">投资者关系</a>
            </dd>
          </dl>
          <dl class="footer-1">
            <dt>使用与帮助</dt>
            <dd class="footer-1-1">
              <a href="https://about.zhipin.com/agreement">协议与规则</a>
              <a href="https://about.zhipin.com/agreement?id=personalinfopro"
                >隐私政策</a
              >
              <a href="https://www.zhipin.com/activity/cc/anticheatguide.html"
                >防骗指南</a
              >
              <a href="https://www.zhipin.com/activity/cc/usehelp.html"
                >使用帮助</a
              >
            </dd>
          </dl>
          <dl class="footer-2-1">
            <dt>联系BOSS直聘</dt>
            <dd class="footer-2-2">
              <p>北京华品博睿网络技术有限公司</p>
              <p>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</p>
              <p>
                违法和不良信息举报邮箱/未成年人举报渠道
                <a class="report-mail" href="mailto:jubao@kanzhun.com"
                  >jubao@kanzhun.com</a
                >
              </p>
            </dd>
          </dl>
          <dl class="footer-2">
            <img
              src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png"
              alt=""
            />
            <p>
              企业服务热线和推荐算法/未成年人等举报渠道
              <span>400 065 5799</span>
            </p>
            <p>老年人直连热线 <span>400 661 6030</span></p>
            <p>工作日 <span>8:00 - 22:00</span></p>
            <p>休息日 <span>9:30 - 18:30</span></p>
          </dl>
        </div>
        <div class="copyrignt">
          <p class="copyrignt-1">
            <span>Copyright © 2022 BOSS直聘</span>
            <span
              ><a href="https://beian.miit.gov.cn/"
                >京ICP备14013441号-5</a
              ></span
            >
            <span>京ICP证150923号</span>
            <span>京网文[2020]0399-066 号</span>
            <a
              href="https://www.zhipin.com/activity/cc/businesslicense.html"
              style="display: inline-block"
              ><span style="display: flex; align-items: center"
                ><img
                  src="https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png"
                  alt=""
                />电子营业执照</span
              ></a
            >
            <a
              style="display: inline-block"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502032801"
              ><span style="display: flex; align-items: center"
                ><img
                  src="https://static.zhipin.com/v2/web/geek/images/icon-beian.png"
                  alt=""
                />
                京公网安备11010502032801</span
              ></a
            >
            <span
              ><a href="http://sdwj.zhipin.com/web/index.html"
                >朝阳网警</a
              ></span
            >
            <span
              ><a
                href="https://www.zhipin.com/web/common/protocol/hr-service.html"
                >人力资源服务许可证</a
              ></span
            >
            <span><a href="https://www.12377.cn">网上有害信息举报专区</a></span>
            <span class="renshe-phone">朝阳区人社局监督电话</span>
          </p>
          <p class="footer-icon">
            <span class="iconfont icon-weibo"></span>
            <span class="iconfont icon-weixin"></span>
            <span class="icon-app">APP</span>
            <span class="iconfont icon-bijiben"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="links-friends-wrapper">
      <div class="container">
        <div class="links-friends">
          <dl class="links-item">
            <dt>友情链接：</dt>
            <dd><a href="#">爱问共享资料</a></dd>
            <dd><a href="#">店长直聘</a></dd>
            <dd><a href="#">留学生招聘</a></dd>
            <dd><a href="#">北京招聘</a></dd>
            <dd><a href="#">上海招聘</a></dd>
            <dd><a href="#">广州招聘</a></dd>
            <dd><a href="#">深圳招聘</a></dd>
            <dd><a href="#">杭州招聘</a></dd>
            <dd><a href="#">天津招聘</a></dd>
            <dd><a href="#">西安招聘</a></dd>
            <dd><a href="#">苏州招聘</a></dd>
            <dd><a href="#">成都招聘</a></dd>
            <dd><a href="#">郑州招聘</a></dd>
            <dd v-show="!isShow" @click="isShowList">
              <a>展开<span class="iconfont icon-jiantoushang"></span></a>
            </dd>
            <dd v-show="isShow" @click="isShowList">
              <a>收起<span class="iconfont icon-jiantouxia"></span></a>
            </dd>
          </dl>
        </div>
        <div v-show="isShow" class="links-friends-bottom">
          <span><a href="#">重庆招聘</a></span>
          <span><a href="#">合肥招聘</a></span>
          <span><a href="#">天眼查</a></span>
          <span><a href="#">百姓健康网</a></span>
          <span><a href="#">喜马拉雅</a></span>
          <span><a href="#">CSDN</a></span>
          <span><a href="#">中国品牌网</a></span>
          <span><a href="#">什么值得买</a></span>
          <span><a href="#">千里马</a></span>
          <span><a href="#">八方资源网</a></span>
          <span><a href="#">搜了网</a></span>
          <span><a href="#">千图网</a></span>
          <span><a href="#">一路商机网</a></span>
          <span><a href="#">土木在线</a></span>
          <span><a href="#">第一PPT</a></span>
          <span><a href="#">查字典</a></span>
          <span><a href="#">齐家网</a></span>
          <span><a href="#">天气王</a></span>
          <span><a href="#">手机中国</a></span>
          <span><a href="#">中公事业编</a></span>
          <span><a href="#">在职研究生招生信息网</a></span>
          <span><a href="#">楼盘网</a></span>
          <span><a href="#">股城网</a></span>
          <span><a href="#">BOSS直聘灵活用工</a></span>
          <span><a href="#">沐风网</a></span>
          <span><a href="#">万表网</a></span>
          <span><a href="#">惠农网</a></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    isShowList() {
      this.isShow = !this.isShow
    },
  },
}
</script>

<style lang="less" scoped>
#footer {
  background-color: #313438;
  padding: 20px 0 10px;
  border-bottom: 1px solid #46494c;
}
.home-inner {
  width: 1200px;
  margin: 0 auto;
}
.footer-about {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  margin-bottom: 10px;
}
.footer-about .footer-1 {
  width: 192px;
}
.footer-1 {
  dt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 16px;
  }
}
.footer-1-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  a {
    margin: 3px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }
}
.footer-2 {
  width: 352px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  img {
    width: 88px;
    height: 16px;
    margin-bottom: 16px;
  }
  p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-bottom: 7px;
  }
}
.footer-2-1 {
  dt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 16px;
  }
}
.footer-2-2 {
  p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 7px;
  }
  a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
  }
}
.copyrignt {
  display: flex;
  line-height: 25px;
}
.copyrignt-1 {
  width: 900px;
  display: flex;
  flex-wrap: wrap;
  span {
    color: #8d92a1;
    font-size: 12px;
    margin-right: 15px;
  }
  a {
    color: #8d92a1;
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    line-height: 16px;
  }
}
.footer-icon {
  margin-left: 35px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  .iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 30px;
    padding: 2px;
    color: #9fa3b0;
    background-color: #46494c;
    margin-left: 20px;
    border-radius: 50%;
  }
  .icon-app {
    padding: 2px;
    width: 42px;
    height: 42px;
    line-height: 40px;
    font-weight: 700;
    color: #9fa3b0;
    display: inline-block;
    text-align: center;
    background-color: #46494c;
    border-radius: 50%;
    margin-left: 20px;
  }
}
.links-friends-wrapper {
  display: flex;
  background-color: #313438;
  padding: 7px 0 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid #46494c;
}
.container {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  margin-bottom: 10px;
}
.links-friends {
  width: 1200px;
  margin: 0 auto;
  margin-top: 10px;
}
.links-item {
  display: flex;
  font-size: 12px;
  color: #989a9c;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  dt {
    margin-right: 24px;
  }
  dd {
    margin-right: 24px;
    cursor: pointer;
    a {
      color: #989a9c;
      height: 26px;
    }
    a:hover {
      text-decoration: underline;
      color: #00bebd;
    }
  }
}
.links-friends-bottom {
  margin-top: 7px;
  margin-left: 90px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  span {
    margin: 5px 0;
  }
  a {
    color: #989a9c;
    font-size: 12px;
    margin-right: 24px;
  }
  a:hover {
    text-decoration: underline;
    color: #00bebd;
  }
}
</style>
